Shapes are one of the most important building blocks in Figma Design. Designers use basic shapes to create buttons, cards, icons, illustrations, navigation elements, avatars, banners, backgrounds, diagrams, and many other UI components. Figma provides built-in shape tools such as Rectangle, Line, Arrow, Ellipse, Polygon, and Star, which can be customized through properties such as size, position, fill, stroke, corner radius, opacity, rotation, and other vector controls.
For structured Figma learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
Shapes in Figma are vector-based design elements that can be created, resized, styled, duplicated, rotated, and edited. They are commonly used as the foundation of user interface designs and visual assets.
Unlike a simple image, vector shapes can generally be resized without losing their basic visual quality. Figma's shape tools provide editable properties so designers can modify the shape after creating it.
Figma Design provides primary shape tools such as Rectangle, Line, Arrow, Ellipse, Polygon, and Star. These tools can be accessed from the Shape tools menu in the toolbar.
| Shape Tool | Shortcut | Common Use |
|---|---|---|
| Rectangle | R | Cards, buttons, containers, backgrounds |
| Line | L | Dividers, borders, diagrams |
| Arrow | Shift + L | Flows, directions, diagrams |
| Ellipse | O | Circles, avatars, badges |
| Polygon | Shape menu | Triangles and custom polygon shapes |
| Star | Shape menu | Stars, decorative elements, icons |
The Rectangle tool is one of the most frequently used shape tools in Figma. It can be used to create rectangles and squares.
Rectangle
Width: 300px
Height: 150px
Fill: #FFFFFF
Corner Radius: 12px
Rectangles are commonly used for cards, buttons, input fields, containers, navigation elements, and sections.
To create a perfect square using the Rectangle tool, hold the Shift key while dragging. This constrains the proportions so that width and height remain equal.
Rectangle
Width = Height
Example: 200px × 200px
A 200px × 200px square can be used as the base for an application icon, product tile, or illustration.
The Ellipse tool is used to create oval and circular shapes. It is especially useful for profile images, avatars, status indicators, circular buttons, and decorative elements.
Hold Shift while dragging the Ellipse tool to create a perfect circle.
Circle
Width: 100px
Height: 100px
Fill: Blue
The Line tool is useful for separators, borders, diagrams, timelines, and visual connections.
The Arrow tool is useful when a design needs to communicate direction, relationships, navigation, or process flow.
The Arrow tool can be accessed using Shift + L.
The Polygon tool creates enclosed shapes made from straight lines. A polygon can contain multiple points and can be edited to create different geometric designs.
After creating a polygon, you can enter object editing mode to manipulate its points and create custom geometric designs.
The Star tool creates star-shaped vector objects. Figma provides editable controls for changing the number of points, inner-point ratio, and corner radius.
| Property | Purpose |
|---|---|
| Count | Controls the number of star points |
| Ratio | Controls the distance of inner points from the center |
| Radius | Rounds the star points |
These properties allow designers to create different star styles for icons, badges, decorative graphics, and illustrations.
The Shift key is useful when you need controlled proportions while creating or resizing shapes.
| Action | Result |
|---|---|
| Drag normally | Free-form dimensions |
| Hold Shift | Constrained proportions |
| Hold Alt/Option | Create or resize from the center |
| Hold Shift + Alt/Option | Constrained proportions from the center |
Before editing a shape, it must be selected. Click the shape on the canvas or select it from the Layers panel.
Canvas
↓
Select Shape
↓
Right Sidebar Appears
↓
Edit Properties
↓
Apply Changes
Once selected, the shape displays its bounding box and editable properties.
Shape dimensions determine its width and height. You can resize a shape manually by dragging its bounding box or enter precise values in the right sidebar.
Width: 320px
Height: 180px
Using exact dimensions is useful when creating consistent UI components and maintaining design specifications.
Shapes can be resized using the bounding box. You can modify the width, height, or both dimensions depending on the desired result.
Original:
Width: 200px
Height: 100px
After Resize:
Width: 300px
Height: 150px
Holding Shift while resizing can maintain proportions when working with shapes where proportional scaling is required.
Shapes can be moved by clicking and dragging them to another location on the canvas.
Precise positioning is especially important when designing layouts that require consistent spacing.
Shapes can be rotated using the rotation handle or by entering a rotation value in the right sidebar.
Rotation: 45°Rotation can be useful for arrows, decorative elements, illustrations, geometric icons, and visual compositions.
The Fill property controls the interior appearance of a shape. A shape can use a solid color, gradient, image, or other supported fill types.
Shape: Rectangle
Fill: #4F46E5
Opacity: 100%
A stroke is an outline around a shape. Stroke properties can be used to create borders and decorative outlines.
| Property | Description |
|---|---|
| Color | Controls the stroke color |
| Weight | Controls stroke thickness |
| Position | Controls how the stroke is positioned |
| Style | Controls solid or dashed appearance |
| Cap | Controls line endpoints |
| Join | Controls how corners connect |
Corner radius controls how rounded the corners of a shape are. It is commonly used for modern buttons, cards, input fields, containers, and UI components.
Rectangle
Width: 300px
Height: 120px
Corner Radius: 16px
Rectangles include corner controls that can be adjusted directly on the canvas, while the right sidebar can be used for precise values.
A button can be created by combining a rectangle with text.
Step 1: Create Rectangle
Width: 160px
Height: 48px
Step 2: Set Corner Radius
Radius: 8px
Step 3: Apply Fill
Fill: Primary Color
Step 4: Add Text
Text: "Get Started"
Step 5: Center Text
Horizontal: Center
Vertical: Center
This simple structure can later be converted into a reusable component.
A UI card can be created using a rectangle as the base and then adding text, icons, images, and additional shapes.
Card
├── Background Rectangle
├── Image / Image Placeholder
├── Title
├── Description
├── Price
└── Action Button
Width: 320px
Height: 420px
Corner Radius: 16px
Fill: #FFFFFF
Stroke: #E5E7EB
Ellipses are commonly used to create circular profile images.
Ellipse
Width: 80px
Height: 80px
Fill: Image
Stroke: 2px
Shape: Circular
An ellipse can also be used as a placeholder when designing a profile page before the actual image is available.
Basic shapes are vector layers, and Figma allows you to enter vector edit mode to manipulate their points and paths. Select a vector layer and press Enter or double-click the shape to enter vector edit mode.
Select Shape
↓
Press Enter
↓
Vector Edit Mode
↓
Select Points
↓
Move / Add / Remove Points
↓
Create Custom Shape
In vector edit mode, individual points can be selected and moved to modify the shape's geometry.
Original Rectangle
┌──────────────┐
│ │
│ │
└──────────────┘
Move Top Center Point
┌──────┬───────┐
│ ▼ │
│ │
└──────────────┘
Result:
Custom Shape
Vector points can be repositioned using the mouse or keyboard nudging to create custom geometry.
Additional vector points can be added when more control over a shape is required. This allows a designer to transform simple geometric shapes into custom illustrations and icons.
Figma's Shape Builder tool can combine two or more vector layers into a single shape. It is useful for creating custom logos, icons, and illustrations.
Select Vector Layers
↓
Enter Vector Edit Mode
↓
Select Shape Builder
↓
Select Desired Regions
↓
Merge / Extract / Subtract
↓
Create Custom Shape
Shape Builder changes the selected vector geometry directly, so it should be used carefully. Use Undo or version history if an unwanted modification is made.
Boolean operations are useful when multiple shapes need to be combined or modified to create a new geometric form.
| Operation | Purpose |
|---|---|
| Union | Combines overlapping shapes |
| Subtract | Removes one shape area from another |
| Intersect | Keeps the overlapping area |
| Exclude | Removes overlapping areas while retaining outer regions |
Circle + Rectangle
↓
Boolean Operation
↓
Custom Icon Shape
Many simple icons can be constructed from basic geometric shapes.
Ellipse
+
Triangle
↓
Combine / Edit
↓
Location Icon
Circle
+
Line
↓
Rotate Line
↓
Search Icon
Using basic shapes makes icon construction easier to edit and maintain during the design process.
Duplicating shapes is useful when creating repeated elements such as cards, buttons, navigation items, or icon sets.
Windows: Ctrl + D
Mac: Command + D
Card 1
↓ Duplicate
Card 2
↓ Duplicate
Card 3
↓ Duplicate
Card 4
Shapes can be copied and pasted to reuse existing design elements.
Windows:
Ctrl + C
Ctrl + V
Mac:
Command + C
Command + V
Copying shapes is useful when similar elements are required in different areas of a design.
Alignment tools help create clean and organized layouts.
Shape A Shape B Shape C
↓ ↓ ↓
-----------------------------------
Horizontal Alignment
When multiple shapes are selected, distribution tools help maintain equal spacing between objects.
Shape A Shape B Shape C Shape D
↕ ↕ ↕ ↕
Equal spacing between objects
This is particularly useful when designing navigation menus, card grids, icon rows, and repeated UI elements.
Opacity controls the transparency of a shape.
Opacity: 100% → Fully visible
Opacity: 75% → Slightly transparent
Opacity: 50% → Semi-transparent
Opacity: 25% → Mostly transparent
Opacity can be used for overlays, disabled states, decorative elements, shadows, and visual hierarchy.
Shapes can be locked when they should not be accidentally moved or edited.
Locking important shapes can make complex design files easier to work with.
Shapes can be temporarily hidden when they are not required during editing.
Visible Shape
↓
Hide
↓
Shape remains in file
↓
Show again when required
Hiding is useful when working on complex designs with many layers.
When multiple shapes overlap, their layer order determines which object appears in front.
Background Shape
↓
Middle Shape
↓
Foreground Shape
| Feature | Shape | Image |
|---|---|---|
| Vector-based | Yes | Usually raster |
| Easy to resize | Yes | Depends on resolution |
| Editable points | Yes | No |
| Fill customization | Yes | Image properties |
| Useful for UI structure | Very useful | Less suitable |
| Useful for photographs | No | Yes |
Shapes and frames have different purposes. A shape is generally a visual object, while a frame is a container used to organize other layers and create structured layouts.
Frame
├── Rectangle
├── Text
├── Icon
└── Button
A rectangle can act as a visual background, while a frame can organize multiple objects into a structured UI section.
Shapes can be used inside Auto Layout structures to build responsive UI components.
Auto Layout Frame
├── Icon
├── Text
└── Shape / Background Element
For modern UI design, it is often better to use a frame with Auto Layout for the component structure and use shapes where a visual geometric element is actually needed.
A basic login screen can be constructed using a combination of frames, rectangles, ellipses, text, and icons.
Login Screen
│
├── Background
├── Logo Circle
├── Login Card
│ ├── Email Field
│ ├── Password Field
│ └── Login Button
└── Forgot Password
Login Card: 360 × 500
Input Field: 320 × 48
Button: 320 × 48
Logo Circle: 80 × 80
Product cards are common in e-commerce interfaces and can be built using rectangles, images, text, and smaller shapes.
Product Card
├── Card Background
├── Product Image Area
├── Favorite Circle
├── Product Name
├── Rating
├── Price
└── Add to Cart Button
A navigation bar can use shapes as backgrounds, separators, indicators, and interactive visual elements.
Navigation Bar
├── Logo
├── Home
├── Products
├── About
├── Contact
└── Profile Circle
A rectangle or frame can be used as the navigation background, while smaller shapes can represent indicators or badges.
Dashboard interfaces frequently use rectangles and other shapes to build cards, charts, badges, indicators, and navigation areas.
Dashboard
├── Sidebar
├── Header
├── Statistics Cards
│ ├── Users
│ ├── Orders
│ ├── Revenue
│ └── Sales
├── Chart Area
└── Recent Activity
Create a reusable profile card using basic Figma shapes.
Profile Card
│
├── Card Background
├── Profile Image
├── Name
├── Job Role
└── Follow Button
Create a simple custom icon by combining geometric shapes.
| Mistake | Better Approach |
|---|---|
| Creating circles manually without constraints | Hold Shift while creating an ellipse |
| Using random dimensions | Use precise width and height values |
| Manually positioning repeated objects | Use alignment and distribution tools |
| Using too many independent shapes | Organize them inside frames or components |
| Editing points unnecessarily | Use basic shape properties when possible |
| Inconsistent corner radius | Follow a consistent design system |
| Forgetting layer organization | Rename and structure layers clearly |
Shapes are important building blocks of a design system. Consistent shape dimensions, corner radii, strokes, colors, and spacing help create a unified visual language.
Border Radius:
Small: 4px
Medium: 8px
Large: 16px
Extra Large: 24px
Stroke:
Small: 1px
Medium: 2px
Spacing:
Small: 8px
Medium: 16px
Large: 24px
Create Shape
↓
Select Shape
↓
Set Position
↓
Set Width & Height
↓
Set Fill
↓
Set Stroke
↓
Set Corner Radius
↓
Rotate if Required
↓
Align with Other Elements
↓
Organize Layers
↓
Convert to Component if Reusable
| Task | Shortcut / Method |
|---|---|
| Rectangle | R |
| Ellipse | O |
| Line | L |
| Arrow | Shift + L |
| Vector Edit Mode | Enter / Double-click |
| Duplicate | Ctrl + D / Command + D |
| Constrain proportions | Hold Shift |
| Create from center | Hold Alt / Option |
Shapes are editable vector-based design elements used to create UI components, icons, illustrations, backgrounds, and other visual elements.
The primary shape tools are Rectangle, Line, Arrow, Ellipse, Polygon, and Star.
The Rectangle tool can be activated using R.
The Ellipse tool can be activated using O.
Select the Ellipse tool and hold Shift while dragging.
Select the Rectangle tool and hold Shift while dragging.
Stroke controls the outline of a shape, including its color, weight, style, and endpoint or corner behavior where applicable.
Corner radius controls how rounded the corners of a shape are.
Vector edit mode allows designers to manipulate the points and paths that make up vector layers.
Shapes provide the geometric foundation for many interface elements such as buttons, cards, containers, icons, badges, and navigation components.
Creating and editing shapes is a fundamental Figma skill that every UI/UX designer should understand. Rectangle, Ellipse, Line, Arrow, Polygon, and Star tools provide the basic geometric elements needed to build interfaces and visual designs. By combining accurate dimensions, fills, strokes, corner radius, alignment, vector editing, Boolean operations, and Shape Builder techniques, designers can create both simple UI components and complex custom graphics.
Shapes become even more powerful when they are organized inside frames, combined with text and images, and converted into reusable components. Practicing shape creation through buttons, cards, dashboards, navigation bars, avatars, and custom icons provides a strong foundation for advanced Figma design workflows.
Continue learning with JustAcademy Figma Training or Register for Figma Course Demo.
